import { createContext, useContext, useState } from 'react';
import { Alert, Button, Divider } from 'antd';
import TestZustand from '@/components/TestZustand/TestZustand';

const State = createContext({ token: '' });

const ContextView = () => {
	const { token } = useContext(State);

	return (
		<div>
			<Divider />
			{token === '' ? (
				<Alert type="error" message="没有找到全局配置" />
			) : (
				<Alert type="success" message={`已配置token: ${token}`} />
			)}
		</div>
	);
};

const App = () => {
	const [info, setInfo] = useState({ token: '123456' });

	return (
		<>
			<Button type="primary" onClick={() => setInfo({ token: '7890' })}>
				change
			</Button>
			<TestZustand />
			<State.Provider value={info}>
				<ContextView />
			</State.Provider>
		</>
	);
};

export default App;
